/**
* 页面头部导航组件
* 功能：
* 1. 自适应不同设备的状态栏和导航栏高度
* 2. 支持自定义标题、背景色、边框等样式
* 3. 支持自定义左侧按钮图标和点击事件
* 4. 支持自定义事件处理
*/
<template>
    <!-- 头部容器：使用动态样式绑定，支持自定义样式和CSS变量 -->
    <view class="header-container">
        <!-- 左侧按钮区域：根据配置显示自定义按钮 -->
        <view class="header-left" @click="handleLeftClick" v-if="mergedLeftButton.visible">
            <uni-icons :type="mergedLeftButton.icon" :size="mergedLeftButton.size"
                :color="mergedLeftButton.color"></uni-icons>
        </view>

        <!-- 标题区域：支持自定义颜色和行高，限制最大长度为10个字符 -->
        <view class="header-title">
            {{ title.slice(0, 10) }}
        </view>

        <!-- 右侧占位区域：保持布局平衡 -->
        <view class="header-right-placeholder"></view>
    </view>
</template>

<script>
import { defineComponent, computed, ref, onMounted } from 'vue';
import { storage } from '@/library/storage.js';

export default defineComponent({
    name: 'PageHeader',
    props: {
        // 标题相关配置
        title: {
            type: String,
            default: '' // 页面标题
        },
        titleColor: {
            type: String,
            default: '#333333' // 标题文字颜色
        },

        // 样式相关配置
        backgroundColor: {
            type: String,
            default: '#ffffff' // 背景颜色
        },
        customStyle: {
            type: Object,
            default: () => ({}) // 自定义样式对象，用于覆盖默认样式
        },

        // 自定义左侧按钮配置
        leftButton: {
            type: Object,
            default: () => ({}) // 空对象，使用默认配置
        },

        // 是否自定义事件处理
        customEvent: {
            type: Boolean,
            default: false
        },

        // 边框配置
        showBorder: {
            type: Boolean,
            default: false // 是否显示底部边框
        },
        borderColor: {
            type: String,
            default: '#f0f0f0' // 边框颜色
        }
    },
    // 组件事件

    setup(props, { emit }) {
        // ===== 响应式对象 =====
        const statusBarHeight = ref(20); // 状态栏高度（px）
        const navBarHeight = ref(44); // 导航栏高度（px）
        const headerStyle = ref({});

        // ===== 默认配置 =====
        const defaultLeftButton = {
            icon: 'arrow-left', // 图标类型
            size: 32, // 图标大小
            color: '#333333', // 图标颜色
            text: '', // 按钮文字（预留）
            visible: true // 是否显示
        };

        // ===== 计算属性 =====
        // 智能合并用户配置和默认配置
        const mergedLeftButton = computed(() => {
            const userConfig = props.leftButton || {};
            const merged = { ...defaultLeftButton, ...userConfig };

            // 验证icon是否为有效值 - 从uni-icons库中选择的常用图标
            const validIcons = [
                'arrow-left', 'arrow-right', 'arrow-up', 'arrow-down',
                'close', 'closeempty', 'checkmark', 'checkmarkempty',
                'home', 'home-filled', 'person', 'person-filled',
                'search', 'search-filled', 'more', 'more-filled',
                'settings', 'settings-filled', 'heart', 'heart-filled',
                'star', 'star-filled', 'plus', 'plus-filled',
                'minus', 'minus-filled', 'info', 'info-filled',
                'help', 'help-filled', 'camera', 'camera-filled'
            ];
            if (merged.icon && !validIcons.includes(merged.icon)) {
                console.warn(`无效的图标类型: ${merged.icon}，将使用默认值 arrow-left`);
                merged.icon = 'arrow-left';
            }

            // 验证size是否为有效值
            const validSizes = [24, 28, 32, 36, 40, 44];
            if (merged.size && !validSizes.includes(merged.size)) {
                console.warn(`无效的图标大小: ${merged.size}，将使用默认值 32`);
                merged.size = 32;
            }

            return merged;
        });

        // 计算总头部高度（状态栏 + 导航栏）
        const totalHeaderHeight = computed(() => {
            return statusBarHeight.value + navBarHeight.value;
        });

        // ===== 初始化设备信息 =====
        const initDeviceInfo = () => {
            // 获取设备信息
            const storedDeviceInfo = storage.getDeviceInfo();
            if (storedDeviceInfo) {
                // 根据设备信息调整头部高度
                const { ui } = storedDeviceInfo;
                if (ui) {
                    // 设置状态栏高度
                    statusBarHeight.value = ui.statusBarHeight || 20;

                    // 设置导航栏高度
                    navBarHeight.value = ui.navBarHeight || 44;

                    console.log('PageHeader头部设备信息:', {
                        platform: storedDeviceInfo.platform,
                        statusBarHeight: statusBarHeight.value,
                        navBarHeight: navBarHeight.value,
                        headerHeight: ui.headerHeight
                    });
                }
            } else {
                console.warn('未找到设备信息，使用默认值');
            }
        };

        // 处理左侧按钮点击
        const handleLeftClick = () => {
            // 如果启用自定义事件处理，则交给父组件处理
            if (props.customEvent) {
                emit('leftClick', {
                    leftButton: mergedLeftButton.value
                });
                return;
            }

            // 默认处理：返回上一页
            handleDefaultBack();
        };

        // 默认返回处理
        const handleDefaultBack = () => {
            uni.navigateBack({
                delta: 1,
                fail() {
                    // 返回失败时，弹出确认框询问是否跳转到首页
                    uni.showModal({
                        title: '提示',
                        content: '是否跳转到首页?',
                        success: (res) => {
                            if (res.confirm) {
                                uni.reLaunch({
                                    url: '/pages/Index',
                                    fail: () => {
                                        console.log('跳转失败');
                                    }
                                });
                            }
                        }
                    });
                }
            });
        };

        // ===== 生命周期钩子 =====
        onMounted(() => {
            initDeviceInfo();

            // 向父组件发送头部导航高度信息（所有高度数据均为px单位）
            emit('heightChange', {
                statusBarHeight: statusBarHeight.value,
                navBarHeight: navBarHeight.value,
                totalHeaderHeight: totalHeaderHeight.value
            });
        });

        // ===== 返回数据和方法 =====
        return {
            // 响应式对象
            statusBarHeight,
            navBarHeight,
            totalHeaderHeight,
            mergedLeftButton,

            // 方法函数
            handleLeftClick,
            handleDefaultBack
        };
    }
});
</script>

<style lang="less" scoped>
/* 头部容器基础样式 */
.header-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    align-content: flex-end;
    justify-content: flex-end;
    z-index: 100;
    height: v-bind('totalHeaderHeight + "px"'); // 动态总头部高度
    background-color: v-bind('backgroundColor');
    border-bottom: v-bind('showBorder ? "1px solid " + borderColor : "none"');

    /* 左侧按钮和占位区域样式 */
    .header-left {
        display: flex;
        align-items: center;
        min-width: 60rpx; // 增加最小宽度，避免与系统按钮重叠
        margin-left: 30rpx;
        height: v-bind('navBarHeight + "px"'); // 动态导航栏高度
        flex-shrink: 0; // 防止被压缩

        .uni-icons {
            color: v-bind('mergedLeftButton.color'); // 动态图标颜色
        }
    }

    /* 右侧占位区域样式 */
    .header-right-placeholder {
        min-width: 150rpx; // 与左侧保持一致的最小宽度
        margin-right: 30rpx;
        height: v-bind('navBarHeight + "px"'); // 动态导航栏高度
        line-height: v-bind('navBarHeight + "px"'); // 动态导航栏高度
        flex-shrink: 0; // 防止被压缩
    }

    /* 标题区域样式 */
    .header-title {
        flex: 1;
        text-align: center;
        font-size: 32rpx;
        font-weight: 500;
        height: v-bind('navBarHeight + "px"'); // 动态导航栏高度
        line-height: v-bind('navBarHeight + "px"'); // 动态导航栏高度
        color: v-bind('titleColor'); // 动态标题颜色
    }

    /* 左右文本样式（预留） */
    .left-text,
    .right-text {
        font-size: 28rpx;
        padding: 0 16rpx;
    }
}
</style>
